<!DOCTYPE HTML>
<html>
<head>
  <title>Test for Bug 1199522</title>
  <script type="application/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
  <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
  <script type="application/javascript" src="file_fullscreen-utils.js"></script>
  <style>
    div {
      position: fixed;
      top: 20px; height: 50px;
      opacity: 0.3;
      border: 5px solid black;
      box-sizing: border-box;
    }
    #fullscreen0 {
      left: 50px; width: 50px;
      background: #ff0000;
      border-color: #800000;
    }
    #fullscreen1 {
      left: 100px; width: 50px;
      background: #00ff00;
      border-color: #008000;
    }
    #fullscreen2 {
      left: 150px; width: 50px;
      background: #0000ff;
      border-color: #000080;
    }
  </style>
</head>
<body>
<script type="application/javascript">

/** Test for Bug 1199522 **/

function info(msg) {
  opener.info("[selector] " + msg);
}

function ok(condition, msg) {
  opener.ok(condition, "[selector] " + msg);
}

function is(a, b, msg) {
  opener.is(a, b, "[selector] " + msg);
}

function rectEquals(rect1, rect2) {
  return rect1.x == rect2.x && rect1.y == rect2.y &&
    rect1.width == rect2.width && rect1.height == rect2.height;
}

function getViewportRect() {
  return new DOMRect(0, 0, window.innerWidth, window.innerHeight);
}

var fullscreenElems = [];

function checkFullscreenState(elem, hasState, viewportRect) {
  var id = elem.id;
  var rect = elem.getBoundingClientRect();
  if (hasState) {
    ok(elem.matches(":fullscreen"),
       `${id} should match selector ":fullscreen"`);
    ok(rectEquals(rect, viewportRect),
       `The bounding rect of ${id} should match the viewport`);
  } else {
    ok(!elem.matches(":fullscreen"),
       `${id} should not match selector ":fullscreen"`);
    ok(rectEquals(rect, elem.initialRect),
       `The bounding rect of ${id} should match its initial state`);
  }
}

function checkFullscreenStates(states) {
  var viewportRect = getViewportRect();
  fullscreenElems.forEach((elem, index) => {
    checkFullscreenState(elem, states[index], viewportRect);
  });
}

function begin() {
  fullscreenElems.push(document.getElementById('fullscreen0'));
  fullscreenElems.push(document.getElementById('fullscreen1'));
  fullscreenElems.push(document.getElementById('fullscreen2'));

  var viewportRect = getViewportRect();
  for (var elem of fullscreenElems) {
    var rect = elem.getBoundingClientRect();
    var id = elem.id;
    elem.initialRect = rect;
    ok(!elem.matches(":fullscreen"),
       `${id} should not match selector ":fullscreen"`);
    ok(!rectEquals(elem.initialRect, viewportRect),
       `The initial bounding rect of ${id} should not match the viewport`);
  }

  info("Entering fullscreen on fullscreen0");
  addFullscreenChangeContinuation("enter", enter0);
  fullscreenElems[0].requestFullscreen();
}

function enter0() {
  checkFullscreenStates([true, false, false]);
  info("Entering fullscreen on fullscreen1");
  addFullscreenChangeContinuation("enter", enter1);
  fullscreenElems[1].requestFullscreen();
}

function enter1() {
  checkFullscreenStates([true, true, false]);
  info("Entering fullscreen on fullscreen2");
  addFullscreenChangeContinuation("enter", enter2);
  fullscreenElems[2].requestFullscreen();
}

function enter2() {
  checkFullscreenStates([true, true, true]);
  info("Leaving fullscreen on fullscreen2");
  addFullscreenChangeContinuation("exit", exit2);
  document.exitFullscreen();
}

function exit2() {
  checkFullscreenStates([true, true, false]);
  info("Leaving fullscreen on fullscreen1");
  addFullscreenChangeContinuation("exit", exit1);
  document.exitFullscreen();
}

function exit1() {
  checkFullscreenStates([true, false, false]);
  info("Leaving fullscreen on fullscreen0");
  addFullscreenChangeContinuation("exit", exit0);
  document.exitFullscreen();
}

function exit0() {
  checkFullscreenStates([false, false, false]);

  info("Entering fullscreen on all elements");
  var count = 0;
  function listener() {
    if (++count == 3) {
      document.removeEventListener("fullscreenchange", listener);
      enterAll();
    }
  }
  document.addEventListener("fullscreenchange", listener);
  fullscreenElems[0].requestFullscreen();
  fullscreenElems[1].requestFullscreen();
  fullscreenElems[2].requestFullscreen();
}

function enterAll() {
  checkFullscreenStates([true, true, true]);
  info("Fully-exiting fullscreen");
  addFullscreenChangeContinuation("exit", exitAll);
  synthesizeKey("VK_ESCAPE", {});
}

function exitAll() {
  checkFullscreenStates([false, false, false]);
  opener.nextTest();
}

</script>
</pre>
<div id="fullscreen0">
  <div id="fullscreen1">
    <div id="fullscreen2">
    </div>
  </div>
</div>
</body>
</html>
